<template>
  <div id="world-box">
    <!-- <div id="map-box">
      <right-sub @mapIsLoad="mapIsLoad"></right-sub>
    </div> -->

    <div id="app">
      <router-view v-if="isLoad" />
    </div>

    <canvas id="glcanvas" width="0" height="0"></canvas>
  </div>
</template>

<script>
const { ipcRenderer } = window.require("electron");
const os = window.require("os");
import IP from "ip";
import rightSub from "@/components/layoutSubassemb/rightSub.vue";
export default {
  name: "app",

  components: { rightSub },

  data() {
    return {
      isLoad: true,
      winSize: [],
      bottomData: null,
      isSplitScreen: false,
      isLeftTrigger: false,
      isRightTrigger: false,
      isReload: false,
    };
  },

  methods: {
    getIPAddress() {
      const interfaces = os.networkInterfaces();
      for (const name of Object.keys(interfaces)) {
        for (const inter of interfaces[name]) {
          // 检查是否是IPv4地址，并且不是内部地址
          if (inter.family === "IPv4" && !inter.internal) {
            return inter.address;
          }
        }
      }
      return "无法找到IP地址";
    },
    init() {
      this.setScreen();
      this.mapContentSize();
      this.pointerOffset();
    },

    setScreen() {
      // 计算分辨率差来修改maximumScreenSpaceError
      $("#app").css("width", window.basicWidth);
      $("#app").css("height", window.basicHeight);
      if (window.turnOnZoom) {
        let num = this.winSize[0] / window.basicWidth;
        let scaleY = this.winSize[1] / window.basicHeight;
        $("#app").css({
          transform: "scale(" + num + "," + scaleY + ")",
          transformOrigin: "left top",
          backgroundSize: "100%",
        });
        document.getElementById("app").style.setProperty("--scale", num);
        let style = {
          transform: "scale(" + num + "," + scaleY + ") !important",
          "transform-origin": "left top",
        };
        window.scale = {
          x: num,
          y: scaleY,
        };
        console.log(`横轴的缩放比例${num},纵轴的缩放比例${scaleY}`);
        this.styleCompatibility(style);
      } else {
        document.getElementById("app").style.setProperty("--scale", 1);
      }
    },

    styleCompatibility(styleObj) {
      let styleNode = document.createElement("style");
      let styleStr = "";
      styleNode.setAttribute("type", "text/css");
      for (let i in styleObj) {
        styleStr += `${i}:${styleObj[i]};`;
      }
      // cesium内弹窗样式缩放
      styleNode.innerHTML = `
              .cesium-map{
                overflow:hidden;
              }
              .popup-box
            `;
      let headNode = document.querySelector("head");
      headNode.appendChild(styleNode);
    },

    mapContentSize() {
      const element = $("#map-box");
      if (element) {
        element.css(
          "padding",
          `${94 * window.scale.y}px 0 0 ${306 * window.scale.x}px`
        );
      }
    },

    pointerOffset() {
      const element = document.querySelector("#map-box");
      if (element) {
        element.style.top = `${8 * window.scale.y}%`;
        element.style.right = `${21.8 * window.scale.x}%`;
      }
    },

    mapIsLoad(state) {
      this.isLoad = state;
    },

    getGPU() {
      const canvas = document.createElement("canvas"),
        gl = canvas.getContext("experimental-webgl"),
        debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
      const info = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL); // GPU 型号，e.g., Intel Iris OpenGL Engine
      return info;
    },
  },

  created() {
    const GPUinfo = this.getGPU();
    console.log(GPUinfo);
  },

  mounted() {
    this.Global.IP = this.getIPAddress();
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `http://127.0.0.1:8086/web-apps/apps/api/documents/api.js`;
    document.head.appendChild(script);
  },
};
</script>

<style lang="less" scoped>
#world-box {
  position: relative;
  #map-box {
    // position: absolute;
    // top: 94px;
    // left: 306px;
    width: 100%;
    height: 100%;
    padding: 94px 0 0 306px;
    box-sizing: border-box;
  }

  // #app {
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   width: 100%;
  //   height: 100%;
  //   pointer-events: none;
  //   z-index: 9999;
  // }
}
</style>
